<template>
  <div class="content-div">
    <div class="bread" :class="{ collapse: $store.state.app.isCollapsed === 'true' }">图片概览</div>
    <div class="gallery-contain">
      <div class="img-box" v-for="item in imgsArr" :key="item">
        <img @click="openImg(item)" :src="item" alt="" width="100%">
        <p>
          上传日期: 2020/10/20
        </p>
        <p>
          上传者: 张三
        </p>
        <p>
          <el-link @click="goCheck" type="primary">图片来源: 检查 202009090</el-link>
        </p>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      option: {},
      imgsArr: [],
      dialogVisible: false,
      dialogImageUrl: ''
    }
  },
  created () {
    for (let i = 0; i < 15; i++) {
      const count = i + 1
      this.imgsArr.push(require('@/assets/gallery/' + count + '.jpeg'))
    }
  },
  methods: {
    openImg (img) {
      this.dialogImageUrl = img
      this.dialogVisible = true
    },
    goCheck () {
      this.$router.push('examDetail')
    }
  }
}
</script>
<style lang="scss" scoped>
.overview {
  display: flex;
}
.gallery-contain {
  column-gap:10px;
  column-count: 6;
  margin: 10px auto 0;
}
.img-box {
  padding: 0 0 10px;
  margin-bottom: 10px;
  break-inside: avoid;
  border: 1px solid rgba($color: #000000, $alpha: .1);
  box-shadow: 0 0 4px rgba($color: #000000, $alpha: .1);
  p {
    padding: 3px 10px;
  }
}
</style>
